<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
 	<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.4.4.min.js"></script>
 	<script language="javascript">
$(document).ready(function(){
 $("ul").hide();
 $(".select_img").bind("click",function()
     {
       $("ul").fadeIn(800);
     }); 
 
 $("ul li").hover(function(){
     $(this).addClass("selected").siblings().removeClass("selected");
    }).bind("mouseup",function(){
     $("ul").fadeOut(1);
     var txt = $(this).html();
     var input = document.getElementsByTagName("input");
     input[0].value = txt;
       
    });
 $(this).bind("mouseup",function(){
     //如果ul还显示着，将其隐藏
     if($("ul").css("display") == "block")
     {
      $("ul").fadeOut(0); 
     }
    });
 
});
</script>
 	<style>
	 ul{ list-style:none; display:block; width:90px; margin:0px; padding:0px; border:1px solid #ccc; border-top:0px; height:92px; overflow:scroll;overflow-x:hidden;}
	 ul li{ font-size:12px; height:18px; line-height:18px; cursor:pointer;word-break:keep-all; overflow:hidden;}
	 ul .selected{ background-color:#BC0902; color:#FFF;}
	</style>
</head>

<body>

	<div style=" border:1px solid #CCCCCC; width:90px; height:19px; line-height:20px;">
		<input type="text" class="select_input" style="width:70px; border:0px;" value="请选择分类" readonly="readonly"><img src="${pageContext.request.contextPath}/pages/images/bianji.png" class="select_img" height="18" style=" vertical-align:middle;cursor:pointer; "/>
	</div>
	<ul>
		<li class="selected">请选择分类</li>
		<li title="水果类">水果类</li>
		<li title="蔬菜类">蔬菜类</li>
		<li title="瓜果类">瓜果类</li>
		<li title="水果类2">水果类2</li>
		<li title="蔬菜类2">蔬菜类2</li>
		<li title="瓜果类2瓜果类大">瓜果类2瓜果类大</li>
		<li title="瓜果类3">瓜果类3</li>
		<li title="水果类3">水果类3</li>
		<li title="蔬菜类3">蔬菜类3</li>
		<li title="瓜果类3">瓜果类3</li>
	</ul>
</body>
</html>